<!DOCTYPE html>
<html lang="@@{website_lang}" dir="@@{website_dirLTR}">
<head>
	<meta charset="@@{website_charset}" />
	<title>Form Elements Style 2 - @@{website_title}</title>	
	@@include('./src/components/_global/include-header.html')
</head>  

     
  <body class="page">
  
  
          
    @@include('./src/components/_global/include-loader.html')
    @@include('./src/components/_global/include-toggle-trigger.html')
    
    

  
  
    <div class="uix-wrapper">
    
        <!-- Header Area
        ============================================= -->      
        <header class="uix-header__container">
            
             <div class="uix-header">
                 <div class="container">
                 
                        @@include('./src/components/_global/include-brand.html')
                        
                        @@include('./src/components/_global/include-menu.html')
                        
                        
                        
                        
                  </div>
                  <!-- .container end -->
                  
                  <div class="uix-clearfix"></div>
             </div>
        
        </header>
        <div class="uix-header__placeholder js-uix-header__placeholder-autoheight"></div>
      
     
		<main id="uix-maincontent">
			
	
			<form method="post" action="#" id="app-my-form">

				<!-- Content 
				====================================================== -->
				<section class="uix-spacing--s uix-spacing--no-bottom">
					<div class="container">
						<div class="row">
							<div class="col-12">
								<h3>Inputs</h3>
								<hr>


							</div>
						</div>
						<!-- .row end -->

					</div>
					<!-- .container end -->

				</section>


			   <!-- Content 
				====================================================== -->
				<section class="uix-spacing--s">
					<div class="container">


						   <div class="row">
								<div class="col-12">

									Text 1:
									<div class="uix-controls uix-controls--line">
									  <input type="text" class="js-uix-float-label" value="" name="input-name-1">
									  <label>Input Normal</label>

									</div>
									<br>

									Text 2:
									<div class="uix-controls uix-controls--line">
									  <input type="text" class="js-uix-float-label" name="input-name-2" maxlength="50" value="0">
									  <label>Input Normal</label>
									</div>
									<br>

									Text 3:
									<div class="uix-controls uix-controls--line is-disabled">
									  <input type="text" class="js-uix-float-label" name="input-name-3" disabled>
									  <label>Disabled</label>

									</div>

									<div class="uix-controls uix-controls--line">
									  <input type="text" class="js-uix-float-label"  name="input-name-3_2" readonly>
									  <label>Read Only</label>

									</div>

									<div class="uix-controls uix-controls--line">
									  <input type="text" class="js-uix-float-label" name="input-name-3_3" required>
									  <label>Required<span class="uix-controls__im">*</span></label>

									</div>

									<br>

									Text 4:<br>
									<div class="uix-controls uix-controls--line is-fullwidth">
									  <input type="text" class="js-uix-float-label" name="input-name-4">
									  <label>Fullwidth</label>
									</div>
									<br>


									Text 5:
									<div class="uix-controls uix-controls--line is-error">
									  <input type="text" class="js-uix-float-label" value="Error" name="input-name-5">
									  <label>Input Name</label>
									</div>
									<br>

									Text 6:
									<div class="uix-controls uix-controls--line is-success">
									  <input type="text" class="js-uix-float-label" value="Success" name="input-name-6">
									  <label>Input Name</label>

									</div>
									<br>

									Text 7:
									<div class="uix-controls uix-controls--line is-pill">
									  <input type="text" class="js-uix-float-label" name="input-name-7">
									  <label>Input Name</label>
									</div>
									<br>

									Text 8:
									<div class="uix-controls uix-controls--line is-rounded">
									  <input type="text" class="js-uix-float-label" name="input-name-8">
									  <label>Input Name</label>
									</div>
									<br>

									Text 9:
									<div class="uix-controls uix-controls--line uix-controls__short-s">
									  <input type="text" class="js-uix-float-label" name="input-name-s-1">
									  <label>Short Input 1</label>unit
									</div>
									<br>


									Text 10:
									<div class="uix-controls uix-controls--line uix-controls__short-m">
									  <input type="text" class="js-uix-float-label" name="input-name-s-2">
									  <label>Short Input 2</label>unit
									</div>
									<br>


									Text 11:
									<div class="uix-controls uix-controls--line uix-controls__short-l">
									  <input type="text" class="js-uix-float-label" name="input-name-s-3">
									  <label>Short Input 3</label>unit
									</div>
									<br>

									Text 12:
									<div class="uix-controls uix-controls--line is-iconic">
									  <i class="fa fa-user-o" aria-hidden="true"></i>
									  <input type="text" class="js-uix-float-label" name="input-name-12">
									  <label>Icon Left</label>
									</div>

									<div class="uix-controls uix-controls--line is-iconic is-reversed">
									  <i class="fa fa-user-o" aria-hidden="true"></i>
									  <input type="text" class="js-uix-float-label" name="input-name-12_2">
									  <label>Icon Right</label>
									</div>	
									<br>


									Mixed some UI attributes (<code>class="uix-controls uix-controls--line is-fullwidth is-pill is-success"</code>):<br>
									<div class="uix-controls uix-controls--line is-fullwidth is-pill is-success">
									  <input type="text" class="js-uix-float-label" name="input-name-13">
									  <label>Input Name</label>
									</div>


								</div>  
							</div>
							<!-- .row end -->  
					</div>
					<!-- .container end -->
				</section>


				

				<!-- Content 
				====================================================== -->
				<section>
					<div class="container">
						<div class="row">
							<div class="col-12">
								<h3>Textarea</h3>
								<hr>


							</div>
						</div>
						<!-- .row end -->

					</div>
					<!-- .container end -->

				</section>


			   <!-- Content 
				====================================================== -->
				<section class="uix-spacing--s">
					<div class="container">


						   <div class="row">
								<div class="col-12">

									<div class="uix-controls uix-controls--line uix-controls__textarea">
									  <textarea rows="5" name="comments" class="js-uix-float-label"></textarea>
									  <label>Textarea</label>
									</div>
									<br>
									
	
									<div class="uix-controls uix-controls--line uix-controls__textarea is-fullwidth">
									  <textarea rows="5" name="comments" class="js-uix-float-label"></textarea>
									  <label>Fullwidth</label>
									</div>					
									

								</div>  
							</div>
							<!-- .row end -->  
					</div>
					<!-- .container end -->
				</section>



	

				<!-- Content 
				====================================================== -->
				<section>
					<div class="container">
						<div class="row">
							<div class="col-12">
								<h3>Select (normal)</h3>
								<hr>


							</div>
						</div>
						<!-- .row end -->

					</div>
					<!-- .container end -->

				</section>



			   <!-- Content 
				====================================================== -->
				<section class="uix-spacing--s">
					<div class="container">


						   <div class="row">
								<div class="col-12">
												
									<div class="uix-controls uix-controls--line uix-controls__normal-select is-disabled">
										<span class="uix-controls__arrow"><i class="fa fa-sort"></i></span>
										<select name="country">
											<option value="Option 1">Option 1</option>
											<option value="Option 2">Option 2</option>
											<option value="Option 3">Option 3</option>
										</select>
										<label>Disabled Select</label>


									</div>
									<br>	

									<div class="uix-controls uix-controls--line uix-controls__normal-select">
										<span class="uix-controls__arrow"><i class="fa fa-sort"></i></span>
										<select name="country">
											<option value="Option 1">Option 1</option>
											<option value="Option 2">Option 2</option>
											<option value="Option 3">Option 3</option>
										</select>
										<label>Select</label>


									</div>
									<br>


									<div class="uix-controls uix-controls--line uix-controls__normal-select">
										<span class="uix-controls__arrow"><i class="fa fa-sort"></i></span>
										<select name="country">
											<option value="Option 1">Option 1</option>
											<option value="Option 2">Option 2</option>
											<option value="Option 3">Option 3</option>
										</select>
										<label>Select</label>


									</div>
									<br>


									<div class="uix-controls uix-controls--line uix-controls__normal-select is-fullwidth">
										<span class="uix-controls__arrow"><i class="fa fa-sort"></i></span>
										<select class="js-uix-float-label">
											<option value="blank"></option>
											<option value="Apple">Apple</option>
											<option value="Banana">Banana</option>
											<option value="Kiwi">Kiwi</option>
											<option value="Orange">Orange</option>
											<option value="Watermelon">Watermelon</option>
										</select>
										<label>Select Arrow</label>
									</div>

												


								</div>  
							</div>
							<!-- .row end -->  
					</div>
					<!-- .container end -->
				</section>




				<!-- Content 
				====================================================== -->
				<section>
					<div class="container">
						<div class="row">
							<div class="col-12">
								<h3>Custom Select</h3>
								<hr>


							</div>
						</div>
						<!-- .row end -->

					</div>
					<!-- .container end -->

				</section>


			   <!-- Content 
				====================================================== -->
				<section class="uix-spacing--s">
					<div class="container">


						   <div class="row">
								<div class="col-12">


									<div class="uix-controls uix-controls--line uix-controls__select is-disabled">
										<label>
											<select name="selectname">
												<option value="Option 1">Option 1</option>
												<option value="Option 2">Option 2</option>
												<option value="Option 3">Option 3</option>
											</select>

										</label>
										<span>Disabled Select</span>

									</div>
									<br>



									<div class="uix-controls uix-controls--line uix-controls__select">
										<label>
											<select name="selectname">
												<option value="Option 1">Option 1</option>
												<option value="Option 2">Option 2</option>
												<option value="Option 3">Option 3</option>
											</select>

										</label>
										<span>Custom Select</span>

									</div>
									<br>

									<div class="uix-controls uix-controls--line uix-controls__select is-fullwidth">
										<label>
											<select name="selectname">
												<option value="">Full Width Select</option>
												<option value="Option 1">Option 1</option>
												<option value="Option 2">Option 2</option>
												<option value="Option 3">Option 3</option>
											</select>

										</label>

									</div>
									<br>

									<div class="uix-controls uix-controls--line uix-controls__select uix-controls__select--top is-pill">
										<label>
											<select name="selectname">
												<option value="Option 1">Option 1</option>
												<option value="Option 2">Option 2</option>
												<option value="Option 3">Option 3</option>
											</select>

										</label>
										<span>Custom Select -Converse</span>


									</div>
										


								</div>  
							</div>
							<!-- .row end -->  
					</div>
					<!-- .container end -->
				</section>


	

				<!-- Content 
				====================================================== -->
				<section>
					<div class="container">
						<div class="row">
							<div class="col-12">
								<h3>Multiple Select</h3>
								<hr>


							</div>
						</div>
						<!-- .row end -->

					</div>
					<!-- .container end -->

				</section>



			   <!-- Content 
				====================================================== -->
				<section class="uix-spacing--s">
					<div class="container">


						   <div class="row">
								<div class="col-12">

									<div class="uix-controls uix-controls--line uix-controls__multi-sel" data-targetid="my-multi-selector-name-1">
										 <span aria-checked="false" role="checkbox" data-value="1">facebook<i class="fa fa-check no"></i></span>
										 <span aria-checked="false" role="checkbox" data-value="2">twitter<i class="fa fa-check no"></i></span>
										 <span aria-checked="false" role="checkbox" data-value="3">google_plus<i class="fa fa-check no"></i></span>
										 <span aria-checked="false" role="checkbox" data-value="4">pinterest<i class="fa fa-check no"></i></span>
									</div>

									<input type="hidden" id="my-multi-selector-name-1" name="my-multi-selector-name-1" value="1,3">


								</div>  
							</div>
							<!-- .row end -->  
					</div>
					<!-- .container end -->
				</section>


	

				<!-- Content 
				====================================================== -->
				<section>
					<div class="container">
						<div class="row">
							<div class="col-12">
								<h3>Single Select</h3>
								<hr>


							</div>
						</div>
						<!-- .row end -->

					</div>
					<!-- .container end -->

				</section>



			   <!-- Content 
				====================================================== -->
				<section class="uix-spacing--s">
					<div class="container">

					   <div class="row">
							<div class="col-12">
								<div class="uix-controls uix-controls--line uix-controls__single-sel" data-targetid="my-cus-radio-name-1">
									 <span aria-checked="false" role="radio" data-value="1" data-switchid="my-cus-radio-switch-1">Switch 1</span>
									 <span aria-checked="false" role="radio" data-value="2" data-switchid="my-cus-radio-switch-2">Switch 2</span>
									 <span aria-checked="false" role="radio" data-value="3" data-switchid="my-cus-radio-switch-3">Switch 3</span>
								</div>

								<input type="hidden" id="my-cus-radio-name-1" name="my-cus-radio-name-1" value="2">

								<div id="my-cus-radio-switch-1" style="padding: 10px; background: #d2ff52; background: linear-gradient(to bottom, #d2ff52 0%,#91e842 100%); margin: -30px 0 15px 0; max-width: 300px;">Switch 1</div>
								<div id="my-cus-radio-switch-2" style="padding: 10px; background: #d2ff52; background: linear-gradient(to bottom, #d2ff52 0%,#91e842 100%); margin: -30px 0 15px 0; max-width: 300px;">Switch 2</div>
								<div id="my-cus-radio-switch-3" style="padding: 10px; background: #d2ff52; background: linear-gradient(to bottom, #d2ff52 0%,#91e842 100%); margin: -30px 0 15px 0; max-width: 300px;">Switch 3</div>

							</div>  

						</div>
						<!-- .row end -->



					   <div class="row">
							<div class="col-12">
								<div class="uix-controls uix-controls--line uix-controls__single-sel is-pill" data-targetid="my-cus-radio-name-2">
									 <span aria-checked="false" role="radio" data-value="1">facebook</span>
									 <span aria-checked="false" role="radio" data-value="2">twitter</span>
									 <span aria-checked="false" role="radio" data-value="3">google_plus</span>
									 <span aria-checked="false" role="radio" data-value="4">pinterest</span>
								</div>

								<input type="hidden" id="my-cus-radio-name-2" name="my-cus-radio-name-2" value="1">

							</div>  

						</div>
						<!-- .row end -->



					</div>
					<!-- .container end -->
				</section>


	

				<!-- Content 
				====================================================== -->
				<section>
					<div class="container">
						<div class="row">
							<div class="col-12">
								<h3>Date</h3>
								<hr>


							</div>
						</div>
						<!-- .row end -->

					</div>
					<!-- .container end -->

				</section>


			   <!-- Content 
				====================================================== -->
				<section class="uix-spacing--s">
					<div class="container">


					   <div class="row">
							<div class="col-12">
								<div class="uix-controls uix-controls--line uix-controls__short-l uix-controls__date">
								  <input  type="text" class="js-uix-float-label" name="shortinput3"
										  autocomplete="off" 
										  data-picker="true" 
										  data-picker-min-date="0"
										  data-picker-max-date="+2050/01/01"
										  data-picker-format="Y-m-d H:i:s" 
										  data-picker-timepicker="true" 
										  data-picker-lang="en">
								  <label>Date 1</label>
								</div>

							</div>  

						</div>
						<!-- .row end -->    

					   <div class="row">
							<div class="col-12">
								<div class="uix-controls uix-controls--line uix-controls__short-l uix-controls__date">
								  <input  type="text" class="js-uix-float-label" name="shortinput3-2"
										  autocomplete="off" 
										  data-picker="true" 
										  data-picker-min-date="-2016/01/01"
										  data-picker-max-date="0"
										  data-picker-format="M d, Y" 
										  data-picker-timepicker="false" 
										  data-picker-lang="en">
								  <label>Date 2</label>
								</div>

							</div>  

						</div>
						<!-- .row end -->   	
						
						
					</div>
					<!-- .container end -->
				</section>




				<!-- Content 
				====================================================== -->
				<section>
					<div class="container">
						<div class="row">
							<div class="col-12">
								<h3>Number</h3>
								<hr>


							</div>
						</div>
						<!-- .row end -->

					</div>
					<!-- .container end -->

				</section>



			   <!-- Content 
				====================================================== -->
				<section class="uix-spacing--s">
					<div class="container">


						   <div class="row">
								<div class="col-12">

									<div class="uix-controls uix-controls--line uix-controls__number">
										<input type="number" step="0.01" min="0" class="js-uix-float-label" name="numberdemo1" value="1">
										<span class="uix-controls__number__btn uix-controls__number__btn--add" data-step="1">+</span>
										<span class="uix-controls__number__btn uix-controls__number__btn--remove" data-step="1">-</span>
									</div>


								</div>  
							</div>
							<!-- .row end -->  
					</div>
					<!-- .container end -->
				</section>



	

				<!-- Content 
				====================================================== -->
				<section>
					<div class="container">
						<div class="row">
							<div class="col-12">
								<h3>Dynamic Fields</h3>
								<hr>


							</div>
						</div>
						<!-- .row end -->

					</div>
					<!-- .container end -->

				</section>


			   <!-- Content 
				====================================================== -->
				<section class="uix-spacing--s">
					<div class="container">


						   <div class="row">
								<div class="col-12">



									<div class="uix-controls__dynamic-fields-container" data-max-fields="10">

										<div class="uix-controls__dynamic-fields__tmpl">
											<div class="uix-controls__dynamic-fields__tmpl__wrapper">

												<!-- Use placeholder `___GUID___` to represent the unique ID of each item  -->
												<!--///////////  Custom fields begin /////////// -->

												<div class="uix-controls uix-controls--line uix-controls__short-l">
													  <input type="text" placeholder="Title" class="js-uix-float-label" value="" name="appnotice-title" id="appnotice-title-___GUID___"><label></label>
												</div>	

												&nbsp;&nbsp;
												<div class="uix-controls uix-controls--line uix-controls__short-l">
													  <input type="text" placeholder="URL" class="js-uix-float-label" value="" name="appnotice-url" id="appnotice-url-___GUID___"><label></label>
												</div>	

												<!--///////////  Custom fields end /////////// -->


												<a href="javascript:void(0);" class="uix-controls__dynamic-fields__removebtn"><i class="fa fa-minus-circle" aria-hidden="true"></i></a>
											</div>

										</div>  


										<div class="uix-controls__dynamic-fields__append"></div>
										<a href="javascript:void(0);" class="uix-controls__dynamic-fields__addbtn"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add new</a>

									</div>
									<!-- /.uix-controls__dynamic-fields-container -->	






								</div>  
							</div>
							<!-- .row end -->  
					</div>
					<!-- .container end -->
				</section>





				<!-- Content 
				====================================================== -->
				<section>
					<div class="container">
						<div class="row">
							<div class="col-12">
								<h3>Tag Input</h3>
								<hr>


							</div>
						</div>
						<!-- .row end -->

					</div>
					<!-- .container end -->

				</section>



			   <!-- Content 
				====================================================== -->
				<section class="uix-spacing--s">
					<div class="container">


						   <div class="row">
								<div class="col-12">

									<div class="uix-controls__tags-wrapper uix-controls--line is-rounded" data-placeholder="Add tag...">
										<input type="text" name="taginputname1" value="">
									</div>

									<br>


									<div class="uix-controls__tags-wrapper uix-controls--line is-rounded" data-placeholder="Add tag..." data-max-tags="5">
										<input type="text" name="taginputname2" value="tag1,tag2">
									</div>
			
			

								</div>  
							</div>
							<!-- .row end -->  
					</div>
					<!-- .container end -->
				</section>

						

	

			   <!-- Content 
				====================================================== -->
				<section class="uix-spacing--s uix-spacing--no-top">
					<div class="container">

					   <div class="row">
							<div class="col-12 uix-t-l">
								<p class="uix-t-l">
								  <button type="submit" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--primary">Submit Your Info</button>
								</p> 

								 <span class="response"></span>

							</div>  

						</div>
						<!-- .row end --> 


					</div>
					<!-- .container end -->


				</section>
		
				
			</form>

			
			
		</main>
		
		
			
        

        
        @@include('./src/components/_global/include-copyright.html')
        
        
    </div>
    <!-- .uix-wrapper end -->
       
	  

	<script>
	( function( $ ) {
	"use strict";

		$( function() {

			/* 
			 ---------------------------
			 Input Validation 
			 ---------------------------
			 */ 
			$(document).off( 'submit' ).on( 'submit', '#app-my-form', function(e) {

				var $form        = $( this ),
					validationOK = true,
					emailRe      = /[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}/igm,
					numReg       = /^\d+$/;


				//Radio
				var radioVal = $form.find( '[name="radioname"]:checked' ).val();

				if ( radioVal == '' || typeof radioVal == typeof undefined ) {
					$form.find( '.response' ).html( '<p class="uix-striking-msg uix-striking-msg--danger"><i class="fa fa-times" aria-hidden="true"></i> This value of radio cannot be left blank.</p>' );

					setTimeout( function(){
						$form.find( '.response' ).html( '' );
					}, 3000 );	

					validationOK = false;
				}


				//Email
				var emailVal = $form.find( '[name="email"]' ).val();
				if ( emailVal != '' && !emailRe.test( emailVal ) && typeof emailVal != typeof undefined ) {
					$form.find( '.response' ).html( '<p class="uix-striking-msg uix-striking-msg--danger"><i class="fa fa-times" aria-hidden="true"></i> A valid email address.</p>' );

					setTimeout( function(){
						$form.find( '.response' ).html( '' );
					}, 3000 );

					$form.find( '[name="email"]' ).focus();

					validationOK = false;
				}


				//Required Fields
				$form.find( '.required' ).each( function()  {


					if ( $( this ).val() == '' ) {

						var _ft = $( this )
										.closest( '.row' )
										.find( '[class*=col-]' )
										.html();


						if ( _ft.indexOf( '</select>' ) >= 0 ) {
							_ft = _ft.replace(/<select[\s\S]*<\/select>/ig, '' )
									 .replace(/<span\sclass=\"uix-controls\_\_select\-trigger\">[\s\S]*<\/span>/ig, '' );


						}


						var info = _ft.replace(/(&nbsp;|<([^>]+)>|\*)/ig, '' );

						$form.find( '.response' ).html( '<p class="uix-striking-msg uix-striking-msg--danger"><i class="fa fa-times" aria-hidden="true"></i> "'+info+'" Can not be empty.</p>' );

						setTimeout( function(){
							$form.find( '.response' ).html( '' );
						}, 3000 );

						$( this ).focus();

						validationOK = false;

						//break this loop
						return false;

					}



				});




				//Checkbox
				if ( validationOK && !$form.find( '[name="checkboxname"]' ).get(0).checked ) {
					$form.find( '.response' ).html( '<p class="uix-striking-msg uix-striking-msg--danger"><i class="fa fa-times" aria-hidden="true"></i> This value of checkbox cannot be left blank.</p>' );

					setTimeout( function(){
						$form.find( '.response' ).html( '' );
					}, 3000 );	

					validationOK = false;
				}



				if ( validationOK ) {
					return true;
				} else {
					return false;
				}

			});  	


		} );


	} ) ( jQuery );	

	</script> 

	  
       
    @@include('./src/components/_global/include-footer.html')

